<script setup lang="ts">
import { reactive, ref } from "vue";
import { Log } from "@/api/system";
import { FormProps, usePublicHooks } from "@/views/hooks";
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";

const props = withDefaults(defineProps<FormProps<Log>>(), {
  formInline: () => ({})
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const { tagStyle } = usePublicHooks();

const data = reactive({
  logParams: JSON.parse(newFormInline.value.logParams),
  returnValue: JSON.parse(newFormInline.value?.returnValue ?? "{}")
});

const state = reactive({
  showLine: true,
  showLineNumber: true,
  showDoubleQuotes: true,
  showLength: true,
  editable: false,
  showIcon: true,
  deep: 3
});

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-scrollbar height="500px">
    <el-descriptions class="margin-top" :column="4" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">业务模块</div>
        </template>
        {{ newFormInline.busType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">具体业务</div>
        </template>
        {{ newFormInline.title }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">接口耗时</div>
        </template>
        {{ newFormInline.cost }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">响应结果</div>
        </template>
        <el-tag :style="tagStyle(newFormInline.status === '成功')">
          {{ newFormInline.status }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">IP</div>
        </template>
        {{ newFormInline.remoteAddr }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">归属地</div>
        </template>
        {{ newFormInline.ipRegion }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">系统</div>
        </template>
        {{ newFormInline.os }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">浏览器</div>
        </template>
        {{ newFormInline.browser }}
      </el-descriptions-item>
      <el-descriptions-item :span="4">
        <template #label>
          <div class="cell-item">UserAgent</div>
        </template>
        {{ newFormInline.userAgent }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">请求URI</div>
        </template>
        {{ newFormInline.requestUri }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">请求方法</div>
        </template>
        {{ newFormInline.requestMethod }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">程序方法</div>
        </template>
        {{ newFormInline.logMethod }}
      </el-descriptions-item>
      <el-descriptions-item :span="4">
        <template #label>
          <div class="cell-item">请求参数</div>
        </template>
        <vue-json-pretty
          :data="data.logParams"
          :deep="state.deep"
          :show-double-quotes="state.showDoubleQuotes"
          :show-line="state.showLine"
          :show-length="state.showLength"
          :show-icon="state.showIcon"
          :show-line-number="state.showLineNumber"
          :editable="state.editable"
        />
      </el-descriptions-item>
      <el-descriptions-item v-if="newFormInline.status === '成功'" :span="4">
        <template #label>
          <div class="cell-item">请求结果</div>
        </template>
        <vue-json-pretty
          :data="data.returnValue"
          :deep="state.deep"
          :show-double-quotes="state.showDoubleQuotes"
          :show-line="state.showLine"
          :show-length="state.showLength"
          :show-icon="state.showIcon"
          :show-line-number="state.showLineNumber"
          :editable="state.editable"
        />
      </el-descriptions-item>
      <el-descriptions-item v-if="newFormInline.status === '失败'" :span="4">
        <template #label>
          <div class="cell-item">错误信息</div>
        </template>
        <el-text style="white-space: pre-wrap">
          {{ newFormInline.logException }}
        </el-text>
      </el-descriptions-item>
    </el-descriptions>
  </el-scrollbar>
</template>
